<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			body {
				margin: 0;
			}
			.popup {
				width: 400px;
				/* background-color: rgba(0, 0, 0, 0.5); */
				/* border: 2px solid rgba(2, 171, 255, 0.8); */
				/* background-image: url(./img/bg2.png); */
				background-size: 100% 100%;
			}
			header {
				padding-left: 10px;
				display: flex;
				align-items: center;
				font-size: 26px;
				background: linear-gradient(270deg, rgba(5, 63, 113, 0.5) 0%, rgba(2, 171, 255, 0.9) 100%);
				height: 50px;
				line-height: 100px;
				color: #fff;
				position: relative;
			}
			header::before {
				display: block;
				width: 20px;
				height: 20px;
				content: '';
				background-color: #02eaff;
				border-radius: 50%;
				margin-right: 5px;
			}
			.content {
				display: flex;
				padding: 20px 10px;
				font-size: 14px;
				background-color: rgba(3, 7, 17, 0.8);
			}
			.left {
				margin-right: 20px;
			}
			.title {
				color: #fff;
				padding: 10px 0;
				background-image: url(./img/popupTitle.png);
				background-size: 100% 100%;
				padding-left: 40px;
				margin-left: -10px;
			}
			.center {
				padding: 20px 20px;
				background: rgba(3, 7, 17, 0.2);
				color: #fff;
				height: 120px;
				text-align: justify;
			}
			.icon {
				width: 15px;
				height: 15px;
			}
			.title1 {
				color: #fff;
				display: flex;
				align-items: center;
			}
			.span1 {
				padding: 3px 13px;
				background: linear-gradient(180deg, #0a6e8a 0%, #1e9cbf 99%);
				border-radius: 5px;
				color: #fff;
				margin-right: 5px;
			}
			.span2 {
				color: #14b7e4;
				margin-left: 5px;
			}
			.box:nth-child(n + 2) {
				margin-top: 37px;
			}
			.mark {
				color: #ffc16a;
			}
			.key {
				width: 200px;
			}
			.title2 {
				display: flex;
				color: #fff;
				margin-top: 10px;
			}
			.content > div {
				flex: 1;
			}
			.close {
				font-size: 40px;
				position: absolute;
				right: 10px;
				cursor: pointer;
			}
		</style>
		<script src="../js/"></script>
		<script src="../js/ac.min.js"></script>
	</head>
	<body>
		<div class="popup">
			<header>
				客流量
				<div class="close">×</div>
			</header>
			<div class="content">
				<div class="left">
					<div class="item">
						<div class="title">预计客流量</div>
						<div class="center">
							7:30-8:00 预计到达旅客 2497人； 8:00-9:00 预计到达旅客 1780； 10:00-11:00 预计到达旅客2603人11:00-12:00
							预计到达旅客3708人； 14:00-15:00 预计到达旅客 1708人； 夜间 23:00-次日5:30
							预计到达旅客1171人，以上客流较大，请单位及时关注
						</div>
					</div>
					<div class="item">
						<div class="title">实际客流量</div>
						<div class="center">
							昨日实际发送 75 列，实际到达75列，实际发送旅客 26963 人实际到达旅客 36290 人。今日预计发送
							71列，预计到达70列，预计发送旅客 1.64 万人预计到达旅客 2.42 万人。
						</div>
					</div>
				</div>
				<!-- <div class="right">
					<div class="item">
						<div class="title">实际客流量</div>
						<div class="center">
							昨日实际发送 75 列，实际到达75列，实际发送旅客 26963 人实际到达旅客 36290 人。今日预计发送
							71列，预计到达70列，预计发送旅客 1.64 万人预计到达旅客 2.42 万人。
						</div>
					</div>
				</div> -->
			</div>
		</div>
		<script>
			// const queryString = window.location.search
			// const urlParams = new URLSearchParams(queryString)
			// const info = JSON.parse(urlParams.get('info'))
			// // console.log("info", JSON.parse(info));
			// const attrBody = document.querySelector('.desc')
			// console.log('属性弹框', info)
			// let str = ''
			// for (let key in info) {
			// 	str += `<div class="item">
			// 			<div class="key">${key}:</div>
			// 			<div class="value">${info[key]}</div>
			// 		    </div>`
			// }
			// attrBody.innerHTML = str
			// // const title = urlParams.get('title')
			// // // document.querySelector('.e-name').innerText = equipmentName
			// // document.querySelector('.b-name').innerText = title
			// const img = urlParams.get('img')

			// document.querySelector('.eqImg').src = img
			window.onload = () => {
				new DigitalTwinAPI()
				document.querySelector('.close').addEventListener('click', () => {
					FdExternal.close()
				})
			}
		</script>
	</body>
</html>
